<template>
  <div class="langTabg flex_aic_jcc gap-14 mb16">
    <div
      class="langTabg-item flex_aic cursor-pointer"
      :class="{ active: value == item.value }"
      v-for="item in langs"
      :key="item.value"
      @click="changeValue(item.value)"
    >
      <img :src="item.icon" alt="" />
      <span>{{ item.label }}</span>
    </div>
  </div>
</template>
<script setup>
const value = defineModel();
const langs = [
  {
    label: "简体中文",
    value: "ZhCN",
    icon: new URL("@/assets/images/common/country/中国.png", import.meta.url)
      .href,
  },
  {
    label: "English",
    value: "EnUS",
    icon: new URL("@/assets/images/common/country/英国.png", import.meta.url)
      .href,
  },
  {
    label: "Қазақша",
    value: "Kz",
    icon: new URL(
      "@/assets/images/common/country/哈萨克斯坦.png",
      import.meta.url
    ).href,
  },
  {
    label: "Русский",
    value: "RuRU",
    icon: new URL("@/assets/images/common/country/俄罗斯.png", import.meta.url)
      .href,
  },
];

const changeValue = (val) => {
  value.value = val;
};
</script>
<style lang="scss" scoped>
.langTabg {
  width: 100%;
  overflow-x: auto;
  &-item {
    position: relative;
    span {
      height: 38px;
      line-height: 38px;
    }
    &.active {
      span {
        color: #288dfc;
        border-bottom: 2px solid #1684fc;
      }
    }
    img {
      width: 20px;
      height: 13px;
      margin-right: 6px;
    }
    &::after {
      content: "";
      width: 1px;
      height: 15px;
      background-color: #efefef;
      margin-left: 14px;
    }

    &:last-child {
      &::after {
        display: none;
      }
    }
  }
}
</style>
